<template>
  <div>
    <h2>父组件传入的数据是: {{ props.age }}</h2>
    <div :class="customClass" :style="customStyle">{{ name }}</div>

    <div v-for="(item, index) in props.users" :key="index">
      {{ item.name }} - {{ item.age }}
    </div>


    ----------------------------

    <Child2/>

    ----------------------------

  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import Child2 from "./Child2.vue";

//const props = defineProps(['age', 'users'])

const email = ref("init@qq.com");

// 定义当前组件接受的参数列表
const props = defineProps({
  age: Number,
  users: Array,
});

// 定义/声明 当前组件可抛出的事件列表
const emit = defineEmits(["userUpdated", "a", "b"]);

const userUpdate = (data) => {
  console.log("抛出用户更新事件，传递的数据为：", data);
  emit("userUpdated", data);
};

console.log("age: ", props.age, "users", props.users);

// 返回当前组件内部的属性/变量的值：email
const getEmail = () => {
  return email.value;
};

// 定义对外开放的访问内部变量/属性的接口方法
defineExpose({getEmail})

const name = ref("teacher");
const customClass = ref("normal");

const customStyle = reactive({
  fontSize: "12px",
});

setTimeout(() => {
  customClass.value = "err";
  customStyle.fontSize = "20px";

  userUpdate({
    name: "user3",
    age: 19,
  });
}, 6000);
</script>   
<style scoped>
.normal {
  color: #000000;
}

.err {
  color: blue;
}
</style>